<!-- 概览 -->
<template>
    <!-- 资产概况 -->
    <div class="summary-box">
        <div class="summary-title">资产概况</div>
        <div class="summary">
            <div class="money">
                <p>资产</p>
                <span>60000</span>
            </div>
            <div class="debt">
                <p>负债</p>
                <span>60000</span>
            </div>
            <div class="net-assets">
                <p>净资产</p>
                <span>60000</span>
            </div>
        </div>
    </div>

    <!-- 收支表 -->
     <div class="money-box">
        <div class="money-trends-title">收支表</div>
        <div class="money-details">
            <div class="row1 date-blank"></div>
            <div class="date-week row1">本周</div>
            <div class="date-month row1">本月</div>
            <div class="date-year row1">本年</div>
            <div class="income row2">
                <i><CirclePlus /></i>
                收入
            </div>
            <div class="my-color-red row2">￥10000.00</div>
            <div class="my-color-red row2">￥12.00</div>
            <div class="my-color-red row2">￥33.00</div>
            <div class="pay row3">
                <i><Remove /></i>
                支出
            </div>
            <div class="my-color-green row3">￥15.00</div>
            <div class="my-color-green row3">￥17.00</div>
            <div class="my-color-green row3">￥19.00</div>
        </div>
     </div>
</template>

<script lang="ts" setup>
    import { CirclePlus, Remove } from '@element-plus/icons-vue' 
</script>

<style lang="scss" scoped>
    .summary-box {
        margin-bottom: 72px;
    }

    .summary-title {
        font-size: 20px;
        font-weight: 350;
        border-bottom: 1px solid #dcdfe6;
        padding-bottom: 20px;
    }

    .summary {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;

        div {
            flex: 1;

            p {
                font-size: 12px;
                color: gray;
                margin: 0px;
                margin-bottom: 5px;
            }

            span {
                display: block;
                font-size: 26px;
            }

            &.money span {
                color: red;
            }

            &.dept span {
                color: green;
            }
        }
    }

    .money-trends-title {
        font-size: 18px;
        font-weight: normal;
        padding-bottom: 20px;
    }

    .money-details {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 28px 38px 38px;

        &>div {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #808080;

            &.row1 {
                border-top: 1px solid #eaeaec;
                border-bottom: 1px solid #eaeaec;
            }

            &.row2, &.row3 {
                border-bottom: 1px solid #eaeaec;
            }

            &.income {
                background-color: #fafafc;

                i {
                    color: red;
                    margin-right: 7px;
                    svg {
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            
            &.my-color-red {
                color: red;
            }

            &.my-color-green {
                color: green;
            }

            &.pay {
                background-color: #fafafc;

                i {
                    color: green;
                    margin-right: 7px;
                    svg {
                        width: 15px;
                        height: 15px;
                    }
                }
            }

            &.date-blank, &.date-week, &.date-month, &.date-year {
                background-image: linear-gradient(180deg,
                rgba(255,255,255,0.92) 0,
                rgba(250,250,252,0.92) 100%);
            }
        }
    }

</style>